﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>TweenMax demon</title>
        <script src="minified/TweenMax.min.js"></script>
        <script src="minified/jquery-1.10.1.min.js"></script>
        <!--tweenmax中文网演示实例 www.tweenmax.com.cn-->
		<!-- Demo styles -->
		<style>
		body { 
  font-family: 'Source Sans Pro', Arial, sans-serif; 
  background: #becccc; 
  text-transform: uppercase; 
  color: #fff; 
  text-align: center; 
  letter-spacing: -3px; 
  padding:50px;
}


h2{
  font-size:100px;
  position:relative;
  margin:0;
  font-size: 90px;
}

/*
text-shadow originated from: https://codepen.io/zitrusfrisch
*/
.superShadow {
  text-shadow:     0 1px 0 hsl(174,5%,80%),
	                 0 2px 0 hsl(174,5%,75%),
	                 0 3px 0 hsl(174,5%,70%),
	                 0 4px 0 hsl(174,5%,66%),
	                 0 5px 0 hsl(174,5%,64%),
	                 0 6px 0 hsl(174,5%,62%),
	                 0 7px 0 hsl(174,5%,61%),
	                 0 8px 0 hsl(174,5%,60%),
	
	                 0 0 5px rgba(0,0,0,.05),
	                0 1px 3px rgba(0,0,0,.2),
	                0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.2),
	              0 10px 10px rgba(0,0,0,.2),
	              0 20px 20px rgba(0,0,0,.3);
}

strong{
  font-size:200px;
}
		</style>
	</head>
	<body>
<h2>3d text</h2>
<h2>animated</h2>
<h2>with multiple</h2>
<h2>text-shadows</h2>

	<script>
	var tl = new TimelineMax({repeat:6, repeatDelay:1, yoyo:true});
tl.staggerTo("h2", 0.2, {className:"+=superShadow", top:"-=10px", ease:Power1.easeIn}, "0.3", "start")
    </script>
	</body>
</html>